<template>
  <div class="goodsItem" :model="goodsInfo">
    <div>
      <el-image :src="baseUrl+goodsInfo.picUrl" />
      <span>{{ goodsInfo.goodsName }}</span>
    </div>
  </div>

</template>

<script>
import { getInfoById } from '@/api/commodity'

export default {
  name: 'GoodsItem',
  props: {
    index: {
      type: Number,
      required: true
    },
    goodsId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      goodsInfo: {
        goodsId: '',
        picUrl: '',
        goodsName: ''
      }
    }
  },
  created() {
    this.getGoodsInfoById()
  },
  methods: {

    getData() {
      const vm = this
      return vm.goodsInfo
    },
    getGoodsInfoById() {
      const vm = this
      getInfoById({ goodsId: this.goodsId }).then(response => {
        vm.goodsInfo.goodsName = response.data.data.commodityName
        vm.goodsInfo.picUrl = response.data.data.commodityImage
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
